<template>
  <div class="specBox spec_set">
    <div class="title">检查设置</div>
    <div class="radioitem">
      <label>是否检查</label>
      <ul class="radio">
        <li @click="changeCS(true)" :class="{'selected':checkStatus==true}">检查</li>
        <li @click="changeCS(false)" :class="{'selected':checkStatus==false}">不检查</li>
      </ul>
    </div>
    <div class="checkhide" v-show="checkStatus">
      <div class="hideline">
        <label>检查数据类型</label>
        <div class="typeli">
          <span @click="changeCType(1)" :class="{'hover':checkType==1}">所有数据</span>
          <span @click="changeCType(2)" :class="{'hover':checkType==2}">好数据</span>
          <span @click="changeCType(3)" :class="{'hover':checkType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>检查比例设置</label>
        <div class="typeli">
          <input type="number" v-model="checkVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
    <div class="radioitem">
      <label>是否质检</label>
      <ul class="radio">
        <li @click="changeTS(true)" :class="{'selected':testStatus==true}">检查</li>
        <li @click="changeTS(false)" :class="{'selected':testStatus==false}">不检查</li>
      </ul>
    </div>
    <div class="checkhide" v-show="testStatus">
      <div class="hideline">
        <label>检查数据类型</label>
        <div class="typeli">
          <span @click="changeTType(1)" :class="{'hover':testType==1}">所有数据</span>
          <span @click="changeTType(2)" :class="{'hover':testType==2}">好数据</span>
          <span @click="changeTType(3)" :class="{'hover':testType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>检查比例设置</label>
        <div class="typeli">
          <input type="number" v-model="testVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
    <div class="title">积分设置</div>
    <div class="integralBox">
      <div class="countbtn">
        <label>标注积分:</label>
        <a @click="particular" :class="{btncolor : !arrowShow}">详细计算</a>
        <a @click="simpl" :class="{btncolor : arrowShow}">简易计算</a>
      </div>
      <div class="integralall" v-if="score.mark.not_simple">
        <div class="line_type" id="markinput1">
          (<input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.IRR" name="" placeholder="系数" />
          <b>×</b>
          <i>矩形框个数</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.IAR" name="" placeholder="系数" />
          <b>×</b>
          <i>多边形框个数</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ILR" name="" placeholder="系数" />
          <b>×</b>
          <i>分行线个数</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.IAPR" name="" placeholder="系数" />
          <b>×</b>
          <i>字母</i>
          <a>+</a>
          <input class="formula1 formula" type="tel" v-on:input="changecoe('mark')" v-model="score.mark.INAPR" name="" placeholder="系数" />
          <b>×</b>
          <i>非字母</i>)
          <b>×</b>(<input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ARR" name="" placeholder="系数" />
          <b>×</b>
          <i>画框正确率</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ATR" name="" placeholder="系数" />
          <b>×</b>
          <i>文本正确率</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ALR" name="" placeholder="系数" />
          <b>×</b>
          <i>属性正确率</i>)
          <b>×</b>
          <input class="formula1 formula" type="tel" v-on:input="changecoe('mark')" v-model="score.mark.coe" name="" placeholder="积分系数" />
        </div>
      </div>
      <div class="integralall" v-if="!score.mark.not_simple">
        <div class="line_type" id="markinput">
          (<input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ARR" name="" placeholder="系数" />
          <b>×</b>
          <i>画框正确率</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ATR" name="" placeholder="系数" />
          <b>×</b>
          <i>文本正确率</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.ALR" name="" placeholder="系数" />
          <b>×</b>
          <i>属性正确率</i>)
          <b>×</b>
          <input type="tel" class="formula" v-on:input="changecoe('mark')" v-model="score.mark.coe" name="" placeholder="积分系数" />
          <b>×</b>
          <i>好数据张数</i>
        </div>
      </div>
    </div>
    <div class="integralbox">
      <div class="countbtn" v-if="checkStatus">
        <label>检查积分:</label>
        <a @click="part" :class="{btncolor : !arrowShow}">详细计算</a>
        <a @click="simplar" :class="{btncolor : arrowShow}">简易计算</a>
      </div>
      <div class="line" v-if="checkStatus && score.mark.not_simple">
        <div class="line_type" id="checkinput">
          (<input type="tel" class="formula" v-on:input="changecoe('check')" v-model="score.check.IRR" name="" placeholder="系数" />
          <b>×</b>
          <i>矩形框个数</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('check')" v-model="score.check.IAR" name="" placeholder="系数" />
          <b>×</b>
          <i>多边形框个数</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('check')" v-model="score.check.ILR" name="" placeholder="系数" />
          <b>×</b>
          <i>分行线个数</i>
          <a>+</a>
          <input type="tel" class="formula" v-on:input="changecoe('check')" v-model="score.check.IAPR" name="" placeholder="系数" />
          <b>×</b>
          <i>字母</i>
          <a>+</a>
          <input class="formula1 formula" type="tel" v-on:input="changecoe('check')" v-model="score.check.INAPR" name="" placeholder="系数" />
          <b>×</b>
          <i>非字母</i>)
          <b>×</b>
          <input class="formula" type="tel" v-on:input="changecoe('check')" v-model="score.check.coe" name="" placeholder="积分系数" />
        </div>
      </div>
    </div>
    <div class="inputline inputcheck" v-if="checkStatus && !score.mark.not_simple">
      <div class="line_type scorelabel" id="checkinput">
        <input class="formula" type="tel" v-on:input="changecoe('check')" v-model="score.check.coe" placeholder="积分系数">
        <label class="checklabel">检查积分公式</label><input type="text" v-model="score.check.formula" readonly placeholder="检查积分系数*" />
        <span @click="scoreChecktotal" :class="{'checked':score.check.total}">总张数</span>
      </div>
    </div>
    <div class="reason beyond" v-show="textareaStatus!=0">
      <label>超限原因</label>
      <textarea v-model="textareaValue" maxlength="40" placeholder="请输入超限原因"></textarea>
    </div>
    <div class="conten_item">
      <div class="radioitem">
        <label>必须标注属性</label>
        <ul class="radio">
          <li @click="changeproperty(true)" :class="{'selected':exchangeproperty==true}">是</li>
          <li @click="changeproperty(false)" :class="{'selected':exchangeproperty==false}">否</li>
        </ul>
      </div>
      <div class="radioitem">
        <label>必须转写文本</label>
        <ul class="radio">
          <li @click="changetranscription(true)" :class="{'selected':isTranscription ==true}">是</li>
          <li @click="changetranscription(false)" :class="{'selected':isTranscription ==false}">否</li>
        </ul>
      </div>
    </div>
  </div>

</template>
<script>
var self = null;
export default {
    name: "SpecSetting",
    data() {
        return {
            property: false,
            label: false,
            batchEdit: true,
            edit: "",
            exchangeproperty: true, //是否允许不标属性
            isTranscription: true, //是否必须进行转写
            arrowShow: false,
            btncolor: false,
            checkStatus: false, //是否检查
            checkType: 1, //检查数据类型
            checkVal: 100, //检查比例
            testStatus: false, //是否质检
            testType: 1, //质检数据类型
            testVal: 100, //质检比例
            exchangeStatus: true, //是否积分换算
            exchangeVal: 1, //积分换算比例
            textareaStatus: 0, //0:未超限，1:超限 显示原因
            textareaValue: "",
            score: {
                mark: {
                    //标注积分
                    coe: "", //积分系数
                    ARR: "",
                    ATR: "",
                    ALR: "",
                    ILR: "",
                    IRR: "",
                    IAR: "",
                    IAPR: "",
                    INAPR: "",
                    formula: "", //积分方式
                    total: true, //总条数
                    correct: true, //正确率
                    max: "",
                    min: "",
                    not_simple: true
                },
                check: {
                    coe: "",
                    ARR: "",
                    ATR: "",
                    ALR: "",
                    IRR: "",
                    ILR: "",
                    IAR: "",
                    IAPR: "",
                    INAPR: "",
                    formula: "",
                    total: true,
                    correct: true,
                    min: "",
                    max: "",
                    not_simple: true
                }
            }
        };
    },
    props: ["editSpecData"],
    created() {
        self = this;
        if (this.editSpecData) {
        }
    },
    methods: {
        simplar: function() {
            this.score.check.not_simple = false;
            this.score.mark.not_simple = false;
            this.arrowShow = true;
        },
        part: function() {
            this.score.check.not_simple = true;
            this.score.mark.not_simple = true;
            this.arrowShow = false;
        },
        simpl: function() {
            this.score.mark.not_simple = false;
            this.score.check.not_simple = false;
            this.arrowShow = true;
        },
        particular: function() {
            this.score.mark.not_simple = true;
            this.score.check.not_simple = true;
            this.arrowShow = false;
        },
        changeCS: function(flag) {
            this.checkStatus = flag;
            this.changecoe("mark");
            this.changecoe("check");
        },
        changeTS: function(flag) {
            this.testStatus = flag;
        },
        changeEC: function(flag) {
            this.exchangeStatus = flag;
            if (!flag) {
                this.exchangeVal = 1;
            }
        },
        changeproperty: function(flag) {
            this.exchangeproperty = flag;
        },
        changetranscription: function(flag) {
            this.isTranscription = flag;
        },
        changeCType: function(n) {
            this.checkType = n;
        },
        changeTType: function(n) {
            this.testType = n;
        },
        //监听积分设置input
        changecoe: function(type) {
            if (this.score.mark.coe == "" && this.score.check.coe == "") {
                this.textareaStatus = 0;
                this.textareaValue = "";
                if ($("#markinput").find("strong").length != 0) {
                    $("#markinput strong").remove();
                }
                if ($("#markinput1").find("strong").length != 0) {
                    $("#markinput1 strong").remove();
                }
                if ($("#checkinput").find("strong").length != 0) {
                    $("#checkinput strong").remove();
                }
            } else {

                if (type == "mark") {
                  self.ass_api.listenIntegral({
                      taskid :  self.taskId 
                  }).then(data => {
                      if(!data) return;
                      var _data = eval("(" + data.score + ")");
                      var markmin = Number(_data.mark.min);
                      var markmax = Number(_data.mark.max);
                      var markcoe = Number(self.score.mark.coe);
                      var checkmin = Number(_data.check.min);
                      var checkmax = Number(_data.check.max);
                      var checkcoe = Number(self.score.check.coe);
                      self.score.mark.min = markmin;
                      self.score.mark.max = markmax;
                      self.score.check.min = checkmin;
                      self.score.check.max = checkmax;
                      if (markmin == 0 && markmax == 0 && checkmin == 0 &&checkmax == 0) {
                          self.score.mark.coe = 0;
                      } else {
                          if (self.score.mark.coe != "") {
                              if (markcoe > markmax || markcoe < markmin) {
                                  self.textareaStatus = 1;
                                  if ($("#markinput").find("strong").length == 0) {
                                      $("#markinput").append("<strong style='color:red' class='jx'>积分超限</strong>");
                                  }
                                  if ($("#markinput1").find("strong").length == 0) {
                                      $("#markinput1").append("<strong style='color:red' class='jx'>积分超限</strong>");
                                  }
                              } else {
                                  if ($("#markinput").find("strong").length != 0) {
                                      $("#markinput strong").remove();
                                  }
                                  if ($("#markinput1").find("strong").length != 0) {
                                      $("#markinput1 strong").remove();
                                  }
                                  if (self.checkStatus && checkcoe != "") {
                                      if (checkcoe > checkmax || checkcoe < checkmin) {
                                          self.textareaStatus = 1;
                                          if ($("#checkinput").find("strong").length == 0) {
                                              $("#checkinput").append("<strong style='color:red' class='jx'>积分超限</strong>");
                                          }
                                      } else {
                                          self.textareaStatus = 0;
                                          self.textareaValue = "";
                                      }
                                  } else {
                                      self.textareaStatus = 0;
                                      self.textareaValue = "";
                                  }
                              }
                          } else {
                              if ($("#markinput").find("strong").length != 0) {
                                  $("#markinput strong").remove();
                              }
                              if ($("#markinput1").find("strong").length != 0) {
                                  $("#markinput1 strong").remove();
                              }
                          }
                      }
                  })
                } else {
                  self.ass_api.listenIntegral({
                      taskid :  self.taskId 
                  }).then(data => {
                      var _data = eval("(" + data.score + ")");
                      var markmin = Number(_data.mark.min);
                      var markmax = Number(_data.mark.max);
                      var markcoe = Number(self.score.mark.coe);
                      var checkmin = Number(_data.check.min);
                      var checkmax = Number(_data.check.max);
                      var checkcoe = Number(self.score.check.coe);
                      if (markmin == 0 && markmax == 0 && checkmin == 0 && checkmax == 0) {
                          self.score.check.coe = 0;
                      } else {
                          if (self.score.check.coe != "" && self.checkStatus) {
                              if (checkcoe > checkmax || checkcoe < checkmin) {
                                  self.textareaStatus = 1;
                                  if ($("#checkinput").find("strong").length == 0) {
                                      $("#checkinput").append(
                                          "<strong style='color:red' class='jx'>积分超限</strong>"
                                      );
                                  }
                              } else {
                                  if (markcoe != "") {
                                      if (markcoe > markmax || markcoe < markmin) {
                                          self.textareaStatus = 1;
                                          if ($("#markinput").find("strong").length == 0
                                          ) {
                                              $("#markinput").append("<strong style='color:red' class='jx'>积分超限</strong>");
                                          }
                                          if ($("#markinput1").find("strong").length == 0
                                          ) {
                                              $("#markinput1").append(
                                                  "<strong style='color:red' class='jx'>积分超限</strong>"
                                              );
                                          }
                                      } else {
                                          self.textareaStatus = 0;
                                          self.textareaValue = "";
                                      }
                                  } else {
                                      self.textareaStatus = 0;
                                      self.textareaValue = "";
                                  }
                                  if ($("#checkinput").find("strong").length != 0) {
                                      $("#checkinput strong").remove();
                                  }
                              }
                          } else {
                              if (markcoe != "") {
                                  if (markcoe > markmax || markcoe < markmin) {
                                      self.textareaStatus = 1;
                                      if ($("#markinput").find("strong").length == 0) {
                                          $("#markinput").append("<strong style='color:red' class='jx'>积分超限</strong>");
                                      }
                                      if ($("#markinput1").find("strong").length == 0) {
                                          $("#markinput1").append("<strong style='color:red' class='jx'>积分超限</strong>");
                                      }
                                  } else {
                                      self.textareaStatus = 0;
                                      self.textareaValue = "";
                                  }
                              } else {
                                  self.textareaStatus = 0;
                                  self.textareaValue = "";
                              }
                              if ($("#checkinput").find("strong").length != 0) {
                                  $("#checkinput strong").remove();
                              }
                          }
                      }
                  })
                }
            }
            this.formula(type);
        },
        //获得标注积分计算方式
        formula: function(type) {
            if (type == "mark") {
                var s = "",
                    x = "",
                    y = "";
                if (self.score.mark.coe != "") {
                    s = self.score.mark.coe;
                }
                if (self.score.mark.total) {
                    x = "*总条数";
                }
                if (self.score.mark.correct) {
                    y = "*正确率";
                }
                self.score.mark.formula = s + x + y;
            } else {
                var s = "",
                    x = "",
                    y = "";
                if (self.score.check.coe != "") {
                    s = self.score.check.coe;
                }
                if (self.score.check.total) {
                    x = "*总条数";
                }
                if (self.score.check.correct) {
                    y = "*正确率";
                }
                self.score.check.formula = s + x + y;
            }
        },
        scoreMarktotal: function() {
            self.score.mark.total = !self.score.mark.total;
            this.formula("mark");
        },
        scoreMarkcorrect: function() {
            if (self.score.mark.correct) {
                self.score.mark.correct = false;
            } else {
                self.score.mark.correct = true;
            }
            this.formula("mark");
        },
        scoreChecktotal: function() {
            if (self.score.check.total) {
                self.score.check.total = false;
            } else {
                self.score.check.total = true;
            }
            this.formula("check");
        },
        scoreCheckcorrect: function() {
            if (self.score.check.correct) {
                self.score.check.correct = false;
            } else {
                self.score.check.correct = true;
            }
            this.formula("check");
        },
        GetQueryString: function(name) {
            //流转任务时获取batchid
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    },
    watch: {
      editSpecData(val){
          Object.keys(this.editSpecData).forEach(key => {
            if(this.$data.hasOwnProperty(key)){
              this.$set(this, key,val[key])
            }
          })
      }
    },
    mounted: function() {
        this.changecoe("mark");
        this.changecoe("check");
        $(".modal").css({
            width: $(window).width() + "px",
            height: $(window).height() + "px"
        });
        if (this.GetQueryString("taskId")) {
            this.taskId = this.GetQueryString("taskId");
        }
        if (this.GetQueryString("edit")) {
            this.edit = this.GetQueryString("edit");
        }
        // if (this.childLabel.label.length > 0 && this.edit == "true") {
        //     //添加属性，已存在的标签不能删除
        //     for (let i = 0; i < this.childLabel.label.length; i++) {
        //         this.$set(this.childLabel.label[i], "edit", false);
        //     }
        // } else if (
        //     this.edit == null ||
        //     this.edit == undefined ||
        //     this.edit == ""
        // ) {
        //     for (let i = 0; i < this.childLabel.label.length; i++) {
        //         this.$set(this.childLabel.label[i], "edit", true);
        //     }
        // }
    }
};
</script>

<style lang="less" scoped>
.spec_set {
    .title {
        color: #5e6a68;
        font-size: 16px;
        font-weight: 700;
        line-height: 48px;
        display: block;
        position: relative;
        padding-left: 14px;
        margin-top: 10px;
    }
    .title:before {
        position: absolute;
        left: 0;
        top: 17px;
        width: 4px;
        height: 15px;
        display: block;
        background: #07d569;
        content: "";
    }
    .title p {
        padding: 5px 23px;
        display: inline;
        font-size: 12px;
        font-weight: normal;
        color: #e07900;
    }
    .radioitem {
        height: 34px;
        line-height: 14px;
        margin: 15px 0 15px 0;
        .radio {
            height: 14px;
            line-height: 14px;
            float: left;
            margin-top: 10px;
            width: auto;
            margin-left: 0;
            li {
                margin-right: 40px;
                font-size: 14px;
                color: #333;
                cursor: pointer;
                padding-left: 22px;
                display: inline-block;
                background: url("~@/assets/images/common/radio.png") no-repeat -119px
                    0;
                float: left;
                width: auto;
            }
            li.selected {
                background-position: 0 0;
            }
            li.selected[type="cursor"] {
                cursor: default;
            }
        }
        label {
            width: 100px;
            padding-right: 10px;
            text-align: right;
            float: left;
            line-height: 34px;
            color: #666;
        }
    }
    .integralall {
        padding: 21px 20px 1px 20px;
        background: #fafafa;
        a {
            color: #fe8432;
        }
        b {
            color: #0078ff;
        }
        #markinput .jx {
            color: red;
            margin-left: 10px;
        }
      #markinput1 .jx {
            color: red;
        }
        input {
            border: 1px solid #ccc;
            padding: 9px 10px;
            font-size: 14px;
            line-height: 14px;
            width: 85px;
            display: inline-block;
            margin: 0 10px 20px 10px;
        }
    }
    .countbtn {
        margin: 0 0 20px 15px;
        label {
            color: #666;
        }
        a {
            display: inline-block;
            width: 100px;
            font-size: 14px;
            color: #969696;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-align: center;
            margin-right: 10px;
            padding: 5px 0;
        }
        .btncolor {
            background: #e0fdee;
            color: #16cb6d;
            border: 1px solid #16cb6d;
        }
    }
    .checkhide {
        background: #fafafa;
        border-left: 4px solid #fff;
        margin-top: 5px;
        padding: 12px 0;
        .hideline {
            height: 37px;
            line-height: 37px;
            margin-bottom: 15px;
            label {
                width: 180px;
                padding-right: 20px;
                text-align: right;
                display: inline-block;
                text-align: right;
            }
            .typeli {
                display: inline-block;
                position: relative;
                font-size: 0;
                span {
                    width: 108px;
                    line-height: 35px;
                    background: #fff;
                    height: 37px;
                    border: 1px solid #ececec;
                    text-align: center;
                    color: #969696;
                    display: inline-block;
                    margin-right: 17px;
                    font-size: 14px;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    -ms-border-radius: 2px;
                    -o-border-radius: 2px;
                    border-radius: 2px;
                }
                span.hover {
                    border-color: #16cb6d;
                    background: #e0fdee;
                    color: #16cb6d;
                    position: relative;
                    cursor: pointer;
                }
                span.hover:after {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 22px;
                    height: 22px;
                    display: block;
                    content: "";
                    background: url("~@/assets/images/common/work-team/task_select_ico.png")
                        no-repeat 0 0;
                }
                input {
                    line-height: 17px;
                    padding: 10px;
                    border: 1px solid #cacaca;
                    width: 233px;
                }
                i {
                    font-style: normal;
                    color: #999;
                    position: absolute;
                    left: 243px;
                    top: 0;
                    line-height: 37px;
                    font-size: 14px;
                    width: 200px;
                }
            }
            &:last-child {
                margin: 0;
            }
        }
    }
    .integralbox .line {
        padding: 20px 20px 0 20px;
        background: #fafafa;
    }
    .line a {
        color: #fe8432;
    }

    .line b {
        color: #0078ff;
    }
    .inputline .line a {
        color: #fe8432;
    }

    .inputline .line b {
        color: #0078ff;
    }
    .integralbox .line {
        padding: 20px 20px 0 20px;
        background: #fafafa;
    }
    .integralbox .line input {
        border: 1px solid #ccc;
        padding: 9px 10px;
        font-size: 14px;
        line-height: 14px;
        width: 85px;
        display: inline-block;
        margin: 0 10px 20px 10px;
    }
    .line_type span:before {
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        left: -15px;
        top: 11px;
        background: url("~@/assets/images/common/work-team/checkbox.png")
            no-repeat 0 0;
        content: "";
    }
    .line_type span.checked:before {
        background-position: 0 -12px;
    }
    .line_type {
        display: inline-block;
        margin-right: 38px;
        position: relative;
    }
    .line_type .checklabel {
        margin-left: 110px;
    }
    .inputline {
        line-height: 34px;
        margin-bottom: 16px;
        #checkinput span {
            position: absolute;
            left: 280px;
            top: 2px;
            color: red;
            width: 70px;
            font-size: 12px;
        }
        #markinput span {
            position: absolute;
            left: 280px;
            top: 2px;
            color: red;
            width: 70px;
            font-size: 12px;
        }
        label {
            width: 129px;
            display: inline-block;
            font-size: 14px;
            color: #666;
            text-align: right;
            padding-right: 10px;
            input {
                border: 1px solid #ececec;
                padding: 9px 10px;
                font-size: 14px;
                line-height: 14px;
                width: 148px;
                display: inline-block;
            }
            .checktype {
                display: inline-block;
                margin-left: 10px;
            }
        }
        input {
            border: 1px solid #ececec;
            padding: 9px 10px;
            font-size: 14px;
            line-height: 14px;
            width: 148px;
            display: inline-block;
        }
    }
  .inputcheck #checkinput span {
    position: absolute;
    left: 280px;
    top: 2px;
    color: red;
    width: 70px;
    font-size: 12px;
    margin-left: 300px;
}


.inputcheck #checkinput {
    display: inline-block;
    margin-right: 38px;
    position: relative;
    margin-left: 77px;
}
.integralbox #checkinput .jx{
    color:red;
}
.inputcheck #checkinput .jx{
    display: inline-block;
    color: red;
    margin-left: -370px;
}
.integralBox .integralall input {
    border: 1px solid #ccc;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 14px;
    width: 85px;
    display: inline-block;
    margin: 0 10px 20px 10px;
}
.integralbox {
    margin: 20px 0 20px 0;
}

}
.reason label {
    width: 129px;
    display: inline-block;
    font-size: 14px;
    color: #666;
    text-align: right;
    padding-right: 10px
}

.reason label {
    float: left
}

.reason {
    font-size: 0
}

.reason textarea {
    display: inline-block;
    border: 1px solid #ececec;
    padding: 10px;
    width: 468px;
    resize: none;
    height: 80px
}

</style>
